<template>
  <ul class="shop-list">
    <li class="shop-box">
      <el-image class="box-rt" :src="url" :fit="fit"></el-image>
      <div class="box-lf">
        <header class="box-lf-tit">
          <h5 class="box-lf-tit-lf">效果演示</h5>
          <ul class="box-lf-tit-rt">
            <li></li>
          </ul>
        </header>
        <div class="box-lf-tag"></div>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { getShopList } from "@/api/getData";
export default defineComponent({
  setup() {
    getShopList({}).then(res=>{
      console.log(res);
      
    })
    console.log(111);
  },
});
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.shop-list {
  .shop-box {
    padding: 0.6rem 0.4rem;
    display: flex;
    .box-rt {
      @include wh(4rem, 4rem);
    }
    .box-lf {
      flex: 1;
      .box-lf-tit {
        display: flex;
        justify-content: space-between;
        @include sc(0.7rem, #333);
        padding: 0.4rem;
        .box-lf-tit-lf::before {
          content: "品牌";
          background-color: #ffd930;
          @include sc(0.6rem, #333);
          border-radius: 0.2rem;
          margin-right: 0.2rem;
        }
      }
    }
  }
}
</style>
